<template>
	<div class="cominfo">
		<div class="company_positione">
			<h1>{{positione}}</h1>
			<h5 class="h5">{{company}}</h5>
		</div>
		<div class="company_money">
			<label class="cominfo_label">{{money}}万</label>
			<Button type="dashed" class="cominfo_dashed">24小时反馈</Button>
			<Button type="primary" class="cominfo_primary">我感兴趣 请联系我</Button>
		</div>
		<div class="loc_div">
			<span class="loc_div_one">
				<img src="../../../../static/img/pos_img/loc.png"  class="loc_img1"/>
			    <span class="loc_div_city">{{city}}</span>
			</span>
			<span class="loc_div_two">
				<img src="../../../../static/img/pos_img/time.png"  class="loc_img2"/>
				<span class="loc_div_city">{{time}}</span>
			</span>
			
			<span class="collection" v-show="collection_true">已收藏</span>
			<span class="collection" v-show="collection_false">收藏</span>
		</div>
		<div class="company_requirement">
			<span  v-for="(item, index) in requirement">
					<span type="info" class="company_requirement_span">{{item.label}}<span class="color_dpan"> &nbsp;| &nbsp;</span></span>
			</span>
		</div>
		<div class="company_welfare">
			<span  v-for="(item, index) in welfare">
					<Button type="info" class="company_welfare_but">{{item.label}}</Button>
			</span>
		</div>
	</div>
</template>

<script>
	export default {
    	name: 'DCompanyInfo',
        data () {
            return {
            	collection_false:true,
            	collection_true:false,
            	positione:"Web前端开发工程师（高级）",
            	company:"深圳北斗卫星信息科技集团有限公司",
            	money:"23-33",
            	welfare:[
            	    { label: '领导好'},
	            	{ label: '带薪年假'},
	            	{ label: '节日礼物'},
	            	{ label: '扁平管理'},
	            	{ label: '五险一金'}
            	],
            	requirement:[
            	    { label: '本科及以上'},
	            	{ label: '4年以上'},
	            	{ label: '语言不限'},
	            	{ label: '年龄不限'}
            	],
            	city:"深圳",
            	time:"前一天"
            }
        }
    }
</script>
<style scoped>
	.collection{
		float: right;
		position: relative;
		top: 7px;
		cursor: pointer;
		right: 15px;
		font-size: 13px;
	}
	.collection:hover{
		text-decoration: underline;
		color: #2E6CF0;
	}
	.cominfo{
		padding-left: 30px;
        padding-top: 15px;		
	}
	.company_positione{
		padding-top: 10px;
		height:90px;
		width: 100%;
		background: #2D8CF0;
		color: #FFFFFF;
		box-shadow: 10px 10px 5px #888888;
		margin-bottom: 10px;
		border-radius: 5px;
		position: relative;
		left: -20px;
		padding-left: 10px;
	}
	.company_positione>.h5{
		font-size: 14px;
		margin-top: 8px;
	}
	.company_money{
		height:40px;
		width: 100%;
	}
	.cominfo_label{
		font-size: 28px;
		color: #2D8CF0;
		position: relative;
    	top: 6px;
	}
	.cominfo_dashed{
		color: #2D8CF0;
		padding: 1px 1px;
		margin-left: 15px;
	}
	.cominfo_primary{
		float: right;
		position: relative;
		top: 12px;
	}
	.loc_div{
		width: 100%;
		height: 40px;
		margin-top: 15px;
	}
	.loc_img1{
		width: 25px;
		position: relative;
		top: 4px;
	}
	.loc_img2{
		width: 22px;
		position: relative;
		top: 5px;
	}
	.loc_div_city{
		font-size: 15px;
	}
	.loc_div_one{
		margin-right: 15px;
	}
	.company_requirement{
		height:40px;
		width: 100%;
		margin-top: 0px;
	}
	.company_requirement_span{
		font-size: 16px;
	}
	.color_dpan{
		color: #D0D0D0;
	}
	.company_welfare{
		height:50px;
		width: 100%;
	}
	.company_welfare_but{
		margin-right: 15px;
	}
</style>